import { Button, message, Modal, Select, Table } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import React from 'react';
import enums from '../creditCar/enums';
import { downloadFileByUrl } from '@/utils/utils';
import styles from './index.less';
import MaskText from '@/components/MaskText';

const { Option } = Select;

@connect(state => ({
  abnormalCar: state.abnormalCar,
}))
export default class ExportTaskModal extends React.PureComponent {
  state = {
    tableLoading: false,
    curPage: 1,
    pageSize: 10,
    total: 0,
    tableData: [],
    taskType: 'MsCreditBusinessRiskErrorExport',
  };

  componentDidMount() {
    this.handleTableData();
  }

  handleSubmit = msg => {
    const { changeExportTaskModalVisible } = this.props;

    //TODO:请求接口

    changeExportTaskModalVisible(true);
  };

  handleTableData = () => {
    const { curPage, pageSize, taskType } = this.state;
    this.setState({
      tableLoading: true,
    });
    this.props.dispatch({
      type: 'abnormalCar/getDataWithRes',
      payload: {
        url: '/mscreditbusiness/exporttask/page',
        ...{ page: curPage, size: pageSize, taskType },
      },
      callback: response => {
        if (response && response.statusCode == '0') {
          if (response.data.rows.length === 0 && response.data.pagination.current > 1) {
            this.setState(
              {
                curPage: 1,
                pageSize: 10,
              },
              () => {
                this.handleTableData();
              },
            );
          } else {
            this.setState({
              tableData: response.data.rows,
              total: response.data.pagination.total,
            });
          }
        } else {
          // message.error(response.statusMessage);
        }
        this.setState({
          tableLoading: false,
        });
      },
    });
  };

  render() {
    const { submitBntLading, tableData, tableLoading, curPage, pageSize, total } = this.state;

    const { changeExportTaskModalVisible } = this.props;

    const columns = [
      {
        title: '导出时间',
        dataIndex: 'createDate',
        render: text => {
          return moment(text).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        title: '导出人',
        dataIndex: 'createBy',
        render(val) {
          return <MaskText text={val} type="name" />;
        },
      },
      {
        title: '状态',
        dataIndex: 'status',
        render: (text, record) => {
          let findText = enums.taskStatus.array.find(e => e.value === text);
          return findText ? findText.label : text;
        },
      },
      {
        title: '导出结果',
        dataIndex: 'url',
        render: (text, record) => {
          console.log('url:', text);
          if (text) {
            return (
              <a
                onClick={() => {
                  downloadFileByUrl(
                    text,
                    '风控异常车辆-' +
                      moment(record.createDate).format('YYYY-MM-DD HH:mm:ss') +
                      '.csv',
                  );
                }}
              >
                文件下载
              </a>
            );
          }
        },
      },
    ];

    const pagination = {
      showSizeChanger: true,
      total: total,
      current: curPage,
      pageSize: pageSize,
      showTotal: () => {
        return <span>共&nbsp;{total}&nbsp;条</span>;
      },
    };

    const tableProps = {
      columns,
      pagination,
      rowKey: 'sid',
      scroll: { x: 'max-content' },
      loading: tableLoading,
      dataSource: tableData,
      onChange: pagination => {
        this.setState(
          {
            curPage: pagination.current,
            pageSize: pagination.pageSize,
          },
          () => {
            this.handleTableData();
          },
        );
      },
    };

    return (
      <Modal
        title="导出任务"
        onCancel={() => changeExportTaskModalVisible(false)}
        visible={true}
        footer={[
          <Button key="back" type="ghost" onClick={() => changeExportTaskModalVisible(false)}>
            取 消
          </Button>,
          <Button
            key="submit"
            type="primary"
            loading={submitBntLading}
            onClick={() => this.handleSubmit('submit')}
          >
            提 交
          </Button>,
        ]}
      >
        <div className={styles.exportTaskModal}>
          <div className={styles.table}>
            <Table {...tableProps} />
          </div>
        </div>
      </Modal>
    );
  }
}
